<template>
	<view class="image-srcoll-view">
	    <scroll-view class="image-list" :scrollX="true" :showScrollbar="false">
	        <view class="image-box" v-for="(item,index) in imgList" :key="index"><!-- 循环 -->
	            <image class="image-self" :lazyLoad="true" mode="aspectFill" :src="item.data.url"></image>
	            <text class="image-notice-box cu-flex-center" v-if="item.m0>1">{{item.m1+'K'}}</text>
	        </view>
	    </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:[]
			}
		},
		methods: {
			
		},
		props: {
			list: {
				type: Array
			}
		},
		computed: {
			showDpi: function() {
				return function(e, t) {
					var n = parseInt(e / 1e3), o = parseInt(t / 1e3);
					return n >= o ? n : o;
				};
			}
		},
		watch:{
			list:function(val){
				console.log(val,'1********')
				var newList = [];
				let that = this
				val.forEach(function(v,k){
					newList[k] = {};
					newList[k]['data'] = v
					newList[k]['m0'] = that.showDpi(v.width, v.height)
					newList[k]['m1'] = that.showDpi(v.width, v.height) > 1 ? that.showDpi(v.width, v.height) : null
				})
				that.imgList = newList
				console.log(newList,'8********')
			}
		}
	}
</script>

<style>
.left-empty {
    width: 10rpx;
}

.right-empty {
    width: 30rpx;
}

.image-list {
    white-space: nowrap;
}

.image-box {
    width: 288rpx;
    height: 600rpx;
    margin-left: 20rpx;
    display: inline;
    position: relative;
}

.image-box:first-of-type {
    margin-left: 30rpx;
}

.image-box:last-of-type {
    margin-right: 30rpx;
}

.image-self {
    width: 288rpx;
    height: 512rpx;
    border-radius: 12rpx;
}

.image-notice-box {
    height: 36rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: rgba(45,45,45,.66);
    position: absolute;
    bottom: 466rpx;
    left: 24rpx;
    z-index: 10;
    border-radius: 36rpx;
    font-size: 22rpx;
    color: #fff;
}
</style>
